<template>
  <div>
    <td>商铺名称</td>
    <td><input type="text" v-model="date.sname" /></td>
    <td>商铺状态</td>
    <td>
      <select v-model="date.tid">
        <option :value="0">请选择</option>
        <option v-for="a in infos.list" :value="a.tid">{{ a.tname }}</option>
      </select>
    </td>
    <td><input type="button" value="查询" @click="list" /></td>
    <td><input type="button" value="重置" @click="cz" /></td>
    <td><input type="button" value="导出" @click="exp" /></td>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>ID</td>
          <td>商铺名称</td>
          <td>楼层</td>
          <td>业主</td>
          <td>联系电话</td>
          <td>商铺状态</td>
          <td>操作</td>
        </tr>
        <tr v-for="a in info.list">
          <td>{{ a.sid }}</td>
          <td>{{ a.sname }}</td>
          <td>{{ a.slou }}</td>
          <td>{{ a.uname }}</td>
          <td>
            {{ a.sphone.substring(0, 3) + "****" + a.sphone.substring(7, 11) }}
          </td>
          <td>
            <span v-if="a.tname == '出租中'" style="color: green">出租中</span>
            <span v-if="a.tname == '空置'" style="color: blue">空置</span>
          </td>
          <td>
            <input type="button" value="修改" @click="update(a.sid)" />
            <input type="button" value="删除" @click="del(a.sid)" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
//测试git
let info: any = reactive({
  list: [],
});
let infos: any = reactive({
  list: [],
});
let date: any = reactive({
  sname: "",
  tid: 0,
});
onMounted(() => {
  lists();
  list();
});
const list = () => {
  axios({
    url: "/api/Shop/GetList",
    method: "get",
    params: date,
  }).then((res) => {
    console.log(res);
    info.list = res.data;
  });
};
//重置
const cz = () => {
  date.sname = "";
  date.tid = 0;
};
const lists = () => {
  axios({
    url: "/api/Shop/GetType",
    method: "get",
  }).then((res) => {
    console.log(res);
    infos.list = res.data;
  });
};
//导出
const exp = () => {
    location.href=`http://localhost:5068/api/Shop/Export?tid=0`;
}
const update = (sid: any) => {
  router.push({
    path: "/upshop",
    query: {
      sid: sid,
    },
  });
};
const del = (sid: any) => {
  axios({
    url: "/api/Shop/Del",
    method: "get",
    params: {
      sid: sid,
    },
  }).then((res) => {
    if (res.data > 0) {
      alert("删除成功");
      list();
      return;
    } else {
      alert("删除失败");
      return;
    }
  });
};
</script>

<style scoped></style>
